<template>
    <div class="login" clearfix>
        <div class="login-wrap">
            <el-row type="flex" justify="center" align="middle" id="row1">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>用户注册</span>
                    </div>
                    <el-form ref="loginForm" :model="formData" :rules="rules" status-icon label-width="160px">
                        <el-form-item prop="nickname" label="用户昵称">
                            <el-input v-model="formData.nickname" placeholder="请输入姓名" prefix-icon></el-input>
                        </el-form-item>
                        <el-form-item prop="userPhone" label="电话号码">
                            <el-input v-model="formData.userPhone" placeholder="请输入电话号码" prefix-icon></el-input>
                        </el-form-item>
                        <el-form-item prop="userEmail" label="邮箱地址">
                            <el-input v-model="formData.userEmail" placeholder="请输入邮箱地址" prefix-icon></el-input>
                        </el-form-item>
                        <el-form-item prop="userPWD" label="密码">
                            <el-input v-model="formData.userPWD" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="checkuserPWD" label="确认密码">
                            <el-input v-model="formData.checkuserPWD" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="code" label="获取验证码">
                            <el-row>
                                <el-col :span="10">
                                    <el-input v-model="formData.code" placeholder="请输入验证码"></el-input>
                                </el-col>
                                <el-col :span="4" :offset="4">
                                    <el-button type="primary" @click="getMsg">获取验证码</el-button>
                                </el-col>
                            </el-row>

                        </el-form-item>
                        <el-row type="flex" justify="end">
                            <el-col :span="4">
                                <el-link type="primary"><router-link to="/backend/login">登录账号</router-link></el-link>
                            </el-col>
                        </el-row>



                        <el-form-item>
                            <el-button type="primary" icon="el-icon-upload" @click="doRegister()">注 册</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-row>
        </div>
    </div>
</template>

<script>
import { register, sendMsg } from "@/api/userApi"
import router from '@/router';
const options = {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value.trim().length < 6) {
                callback(new Error('密码长度不能低于6'))
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.userPWD) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            formData: {
                nickname: "",
                userPhone: "",
                userPWD: "",
                userEmail: "2113168433@qq.com",
                checkuserPWD: "",
                code: ""
            },
            rules: {
                nickname: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' }
                ],
                userEmail: [
                    { required: true, min: 5, message: '请输入邮箱地址', trigger: 'blur' }
                ],
                userPhone: [
                    { required: true, min: 11, max: 11, message: '电话号码格式错误', trigger: 'blur' }
                ],
                userPWD: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkuserPWD: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                code: [
                    { required: true, message: "请输入验证码", min: 6, max: 6, trigger: 'blur' }
                ]
            }
        };
    },
    created() { },
    methods: {
        getMsg() {
            console.log(this.formData.userEmail);
            let addr = this.formData.userEmail;
            sendMsg(addr);
        },
        doRegister() {
            register(this.formData).then(res => {
                // console.log("输出response.data.status", res.data.status);
                if (res.data.code === 1) {
                    //登录成功记录管理员信息
                    this.$message.success("注册成功");
                    router.push('/front/login');
                } else {
                    this.$message.error("注册失败");
                }
            });
        }
    }
}

export default options;
</script>
 
<style scoped>
.login {
    width: 100%;
    height: 800px;
    background: url("@/assets/images/bg1.jpeg") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.login-warp {
    height: 800px;
}

#row1 {
    height: 800px;
}

.el-link--inner>a {
    text-decoration: none;
    color: #13c9fc;
}
</style>